<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp"%>

<script type="text/javascript">
	
	function addTag(self,tagId,tagName){
		/*
		var flag = false;
		//判断该标签是否已经有了
		$(".alreadyTag").each(function(){
			if($(this).attr("value")==tagId){
				flag = true;
			}
		});
		if(flag){
			$("#errorNotice").html("已经有"+tagName+"了");
		}else{
			$("#beforeTag").before("<li class='alreadyTag' value='"+tagId+"'>"+tagName+"<span></span></li>");
			$("#errorNotice").html("");
		}
		*/
		if($("#tag_size").find("li").size()>=10){
			$("#errorNotice").html("一个家庭最多贴10个标签，您家的标签已经贴满了");
			return;
		}
		$("#no_tag").hide();
		$("#beforeTag").before("<li class='alreadyTag' title='"+tagName+"' value='"+tagId+"'>"+tagName+"<span onclick='deleteTag(this)'></span></li>");
		$(self).parent().parent().remove();
	} 	
	
	function deleteTag(self){
		$("#errorNotice").html("");
		/*
		var tag = $(self).parent().attr("value");
		var tagName = $(self).parent().attr("title");
		$("#all_tag").append("<span>+<strong><a href='javascript:void(0);' onclick='addTag(this,&#039;"+tag+"&#039;,&#039;"+tagName+"&#039;)'>"+tagName+"</a></strong></span>");
		*/
		$(self).parent().remove();
		if($("#tag_size").find("li").size()==0){
			$("#no_tag").show();
		}
	}
 	
	//换一批标签
	function nextTag(page){
		if(page>"${tagCount}"){
			page=1;
		}
		$("#all_tag").load("nextFamilyTag.htm?page="+page);
	}
	
	//保存家的标签
	function saveFamilyTag(){
		var tagList = "";
		$(".alreadyTag").each(function(){
			tagList += $(this).attr("value")+"_";
		});
		$("#delOnclick").attr("onclick","");
		//如果没有进行任何操作
		/*
		alert(tagList=="" && "${fn:length(familyTagList)==0}");
		if(tagList=="" && "${fn:length(familyTagList)==0}"){
			$("#errorNotice").html("您还没有给您的温馨小家没有贴任何标签不能保存哦");
			setTimeout("$('#errorNotice').html('')",3000);
			return;
		}
		*/
		$.post("saveFamilyTag.htm",{
			tagList : tagList
		},function(data) {
				if(data=='success'){
					$("#member_info_detail").load("familyTag.htm",function(){
						showSuccess();
					});
					$("#jiaZiLiao4").attr("class", "current");
				}
		});
	}
	
</script>

<div class="success" id="base_info_tip_success" style="display: none; margin-left: 32px;">
		<img alt="修改成功" src="<%=basePath%>images/home_images/ico29.png">家的标签信息修改成功
	</div>
<div class="h_tagsBox">
	<h3>标签是职业、兴趣爱好等方面的词语，添加后找到同类，也让同类找到你</h3>
	<div class="h_tagsMain" id="all_tag">
		<h4>你可能感兴趣的标签&nbsp;&nbsp;&nbsp;
		<a href="javascript:void(0);" onclick="nextTag('${page+1}')" style="color:fuchsia;">换一批标签</a></h4>
		<c:forEach items="${tagList }" var="tag">
			<span>
				+<strong>
					<a href="javascript:void(0);" onclick="addTag(this,'${tag.identifier}','${tag.name }')">${tag.name }(${tag.tagPopular })</a>
				</strong>
			</span>
		</c:forEach>
	</div>
	<div class="h_tagsAdd">
		<h5>我已经添加的标签</h5>
		<c:if test="${familyTagList!=null && fn:length(familyTagList)<1  }">
			<script>$("#no_tag").show();</script>
		</c:if>
		<span id="no_tag" style="display: none;"><br/>您的家没有一个标签，赶紧给家贴上您感兴趣标签吧，让兴趣相同的和您家做邻居吧</span>
		<ul id="tag_size">
		<c:forEach items="${familyTagList }" var="familyTag">
			<li class='alreadyTag' value='${familyTag.tag }' title="${familyTag.tagName }">${familyTag.tagName }<span onclick='deleteTag(this)'></span></li>
		</c:forEach>
			<div class="clear" id="beforeTag"></div>
		</ul>
	</div>
	<div id="errorNotice" style="color: red;"></div>
</div>
<table>
	<tr>
		<td width="135"></td>
		<td width="524">
			<div class="h_button w75 mt15">
				<strong id="delOnclick" onclick="saveFamilyTag()">保存设置</strong>
			</div></td>
	</tr>
</table>
